<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .context {
            width: 200px;
            height: 150px;
            border: 1px solid #999;
            border-radius: 4px;
            position: absolute;
        }
    </style>
</head>
<body>
    <ul class="context" hidden>
        <li>刷新</li>
        <li>后退</li>
        <li>前进</li>
        <li>打印</li>
    </ul>

    <script>
        var menu = document.querySelector('.context')

        document.addEventListener('contextmenu', function() {
            // 显示自定义菜单
            menu.style.display = 'block';
            // 获取坐标
            menu.style.left = event.clientX+'px';
            menu.style.top = event.clientY+'px';
            // 隐藏默认菜单
            event.returnValue = false;
            event.preventDefault()
        })

        document.addEventListener('click', function() {
            // 点击空白 隐藏菜单
            menu.style.display = 'none';
        })
    </script>
</body>
</html>